<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="test-header table-page-search-wrapper">
        <a-form layout="inline" class="myform">
          <a-row type="flex" :gutter="20">
            <a-col flex="1 0 200px">
              <a-form-item label="规则编号">
                <a-input v-model="form.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col flex="1 0 200px">
              <a-form-item label="使用状态">
                <a-select v-model="form.age" default-value="0">
                  <a-select-option value="0">栏目1</a-select-option>
                  <a-select-option value="1">栏目2</a-select-option>
                  <a-select-option value="2">栏目3</a-select-option>
                  <a-select-option value="3">栏目4</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :span="8">
                <a-form-item label="调用次数">
                  <a-input-number></a-input-number>
                </a-form-item>
              </a-col>
            </template>
            <a-col flex="1 0 200px">
              <a-row>
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left:8px">重置</a-button>
              </a-row>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="showDialog">新建</a-button>
      </div>
      <s-table ref="table" size="default" :alert="true" :columns="columns" :data="loadData" showPagination="auto">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template #status="text">
          <a-badge :status="statusTypeFilter(text)" :text="statusFilter(text)" />
        </template>
        <template #description="text">
          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
        </template>
        <template #action="text, record">
          <template>
            <a>配置</a>
            <a-divider type="vertical" />
            <a>订阅报警</a>
          </template>
        </template>
      </s-table>
      <div @click="add">
        HelloWorld
      </div>
    </a-card>
    <my-dialog ref="c-myDialog"></my-dialog>
  </page-header-wrapper>
</template>
<script>
import myDialog from './components/myDialog.vue'
import { STable, Ellipsis } from '@/components'
import { getRoleList, getServiceList } from '@/api/manage'
const columns = [
  {
    title: '#',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '规则编号',
    dataIndex: 'no'
  },
  {
    title: '描述',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '服务调用次数',
    dataIndex: 'callNo',
    sorter: true,
    needTotal: true,
    customRender: text => text + ' 次'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]
const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

export default {
  components: {
    myDialog,
    STable,
    Ellipsis
  },
  data() {
    return {
      advanced: false,
      columns,
      form: {
        name: '',
        age: ''
      },
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getServiceList(requestParameters)
          .then(res => {
            return res.result
          })
          .then(res => {
            console.log(res)
            return res
          })
      }
    }
  },
  methods: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    },
    add() {
      console.log(`helloworld`)
    },
    showDialog() {
      const c = this.$refs['c-myDialog']
      c.show()
    }
  }
}
</script>
<style type="text/css">
.myform {
  .ant-form-item {
    display: flex;
    align-items: center;
  }
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
</style>
